<template>
    <div class="fixed top-0 left-0 w-screen h-screen flex justify-center items-center flex-col">
        <CoreBackGroundColorComponent />
        <CoreBarNavightionComponent />
        <div class="fixed w-full">
            <div
                class="bg-white mx-2 flex fixed left-0 right-0 justify-center top-12 bottom-3 border overflow-y-auto rounded-tl-lg rounded-tr-lg rounded-bl-xl rounded-br-xl">
                <div
                    class="flex absolute top-0 justify-center w-full text-center mx-2 text-1xl font-bold bg-slate-300 items-center border border-black shadow-lg rounded-br-3xl rounded-bl-3xl flex-col">
                    <h2 v-text="reportStore.headerTitle" class="text-slate-900" />
                </div>
                <div class="flex absolute my-16 justify-center w-full text-center mx-2 items-center flex-col">
                    <h4 class="indent-8 mx-4 text-left text-slate-600" v-text="reportStore.msgTitle" />
                    <div class="w-full">
                        <van-divider :style="{ color: '#7f7e84', borderColor: '#7f7e84', padding: '0 4px', }" />
                        <CoreGroundComponent />
                        <van-divider :style="{ color: '#7f7e84', borderColor: '#7f7e84', padding: '0 4px', }" />
                        <el-table :data="resultStore.ResTable1Value" border>
                            <el-table-column prop="title" label="类型" align="center" />
                            <el-table-column prop="value" label="个数" align="center" />
                        </el-table>
                        <van-divider :style="{ color: '#7f7e84', borderColor: '#7f7e84', padding: '0 4px', }" />
                    </div>
                    <!-- 主人格 -->
                    <div class="w-full mt-2">
                        <div v-text="reportStore.dividerTitle1"
                            class="bg-slate-200 w-full text-center text-xl font-black border border-black shadow-lg rounded-br-full rounded-bl-full" />
                        <van-divider :style="{ color: '#7f7e84', borderColor: '#7f7e84', padding: '0 4px', }" />
                        <div class="flex mt-2 w-full flex-row justify-between">
                            <div class="ml-3 font-bold my-1 text-slate-800 text-base"
                                v-text="reportStore.colTitleType" />
                            <div class="mr-3 my-1 text-gray-400 font-bold text-base justify-center items-center"
                                v-text="reportStore.colTitleTypeContext" />
                        </div>
                        <van-divider :style="{ color: '#7f7e84', borderColor: '#7f7e84', padding: '0 4px', }" />
                        <div class="flex w-full mt-0 flex-col justify-between">
                            <div class="ml-3 font-bold my-1 text-slate-800 text-base text-left"
                                v-text="reportStore.dividerTitle1Msg" />
                            <div class="ml-6 font-bold text-slate-400 text-base text-left"
                                v-text="(reportStore.dividerTitle1Msg + item)" v-for="item in 4" />
                        </div>
                        <van-divider :style="{ color: '#7f7e84', borderColor: '#7f7e84', padding: '0 4px', }" />
                        <div class="flex w-full mt-0 flex-col justify-between">
                            <div class="ml-3 font-bold my-1 text-slate-800 text-base text-left"
                                v-text="reportStore.colTitleContext" />
                            <div class="ml-6 font-bold text-slate-400 text-base text-left"
                                v-text="(reportStore.colTitleContext + item)" v-for="item in 4" />
                        </div>
                        <van-divider :style="{ color: '#7f7e84', borderColor: '#7f7e84', padding: '0 4px', }" />
                    </div>
                    <!-- 次人格 -->
                    <div class="w-full mt-2">
                        <div v-text="reportStore.dividerTitle2"
                            class="bg-slate-200 w-full text-center text-xl font-black border border-black shadow-lg rounded-br-full rounded-bl-full" />
                        <van-divider :style="{ color: '#7f7e84', borderColor: '#7f7e84', padding: '0 4px', }" />
                        <div class="flex mt-2 w-full flex-row justify-between">
                            <div class="ml-3 font-bold my-1 text-slate-800 text-base"
                                v-text="reportStore.colTitleType" />
                            <div class="mr-3 my-1 text-gray-400 font-bold text-base justify-center items-center"
                                v-text="reportStore.colTitleTypeContext" />
                        </div>
                        <van-divider :style="{ color: '#7f7e84', borderColor: '#7f7e84', padding: '0 4px', }" />
                        <div class="flex w-full mt-0 flex-col justify-between">
                            <div class="ml-3 font-bold my-1 text-slate-800 text-base text-left"
                                v-text="reportStore.dividerTitle1Msg" />
                            <div class="ml-6 font-bold text-slate-400 text-base text-left"
                                v-text="(reportStore.dividerTitle1Msg + item)" v-for="item in 4" />
                        </div>
                        <van-divider :style="{ color: '#7f7e84', borderColor: '#7f7e84', padding: '0 4px', }" />
                        <div class="flex w-full mt-0 flex-col justify-between">
                            <div class="ml-3 font-bold my-1 text-slate-800 text-base text-left"
                                v-text="reportStore.colTitleContext" />
                            <div class="ml-6 font-bold text-slate-400 text-base text-left"
                                v-text="(reportStore.colTitleContext + item)" v-for="item in 4" />
                        </div>
                        <van-divider :style="{ color: '#7f7e84', borderColor: '#7f7e84', padding: '0 4px', }" />
                    </div>
                    <!-- 辅人格 -->
                    <div class="w-full mt-2">
                        <div v-text="reportStore.dividerTitle3"
                            class="bg-slate-200 w-full text-center text-xl font-black border border-black shadow-lg rounded-br-full rounded-bl-full" />
                        <van-divider :style="{ color: '#7f7e84', borderColor: '#7f7e84', padding: '0 4px', }" />
                        <div class="flex mt-2 w-full flex-row justify-between">
                            <div class="ml-3 font-bold my-1 text-slate-800 text-base"
                                v-text="reportStore.colTitleType" />
                            <div class="mr-3 my-1 text-gray-400 font-bold text-base justify-center items-center"
                                v-text="reportStore.colTitleTypeContext" />
                        </div>
                        <van-divider :style="{ color: '#7f7e84', borderColor: '#7f7e84', padding: '0 4px', }" />
                        <div class="flex w-full mt-0 flex-col justify-between">
                            <div class="ml-3 font-bold my-1 text-slate-800 text-base text-left"
                                v-text="reportStore.dividerTitle1Msg" />
                            <div class="ml-6 font-bold text-slate-400 text-base text-left"
                                v-text="(reportStore.dividerTitle1Msg + item)" v-for="item in 4" />
                        </div>
                        <van-divider :style="{ color: '#7f7e84', borderColor: '#7f7e84', padding: '0 4px', }" />
                        <div class="flex w-full mt-0 flex-col justify-between">
                            <div class="ml-3 font-bold my-1 text-slate-800 text-base text-left"
                                v-text="reportStore.colTitleContext" />
                            <div class="ml-6 font-bold text-slate-400 text-base text-left"
                                v-text="(reportStore.colTitleContext + item)" v-for="item in 4" />
                        </div>
                        <van-divider :style="{ color: '#7f7e84', borderColor: '#7f7e84', padding: '0 4px', }" />
                    </div>
                    <div class="w-full mt-2">
                        <van-space direction="vertical" fill size='8px' class="mx-3 my-4">
                            <van-button type="primary" @click="reportStore.getSaveExport" size="normal" hairline block
                                round text="保存报告" />
                            <van-button type="danger" @click="reportStore.getGoBack" size="normal" hairline block round
                                text="返回首页" />
                        </van-space>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
const reportStore = useReportStore()
const resultStore = useResultStore()
onBeforeMount(() => {
    reportStore.initStore();
})
</script>

<style scoped></style>